<template>
  <yd-layout class="m-member">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="增值服务" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <div class="m-ct-bg m-member-ct">
      <div class="user-box">
        <div class="avatar-box">
          <img v-lazy="avatar ? avatar : require('../../assets/icon_avatar.png')">
        </div>
        <div class="user-text">
          <p class="name">{{userInfo.nickName}}</p>
          <p class="type">会员类型：<em>普通会员</em></p>
        </div>
      </div>
      <div class="info-box">普通会员可以通过增值服务，升级成为采购商、供应商、采购商可以享受购买商品、查看供应商档案等权益；供应商可以开通店铺、发布商品等权益!</div>

      <!-- 未申请状态 -->
      <div class="add-box" v-if="status == 'not_apply'">
        <div class="add-buyer addin" @click="$router.push('/member/manage?type=purchaser')">
          <div class="addin-text">
            <span class="ch">采购商</span><br/>
            <span class="en">PURCHASER</span>
          </div>
          <div class="addin-btn">立即入驻</div>
        </div>
        <div class="add-supplier addin" @click="$router.push('/member/manage?type=supplier')">
          <div class="addin-text">
            <span class="ch">供应商</span><br/>
            <span class="en">SUPPLIER</span>
          </div>
          <div class="addin-btn">立即入驻</div>
        </div>
      </div>

      <!-- 未支付状态 -->
      <div class="not-pay-status" v-else-if="status == 'not_pay'">
        <ul>
          <li>
            <span>已申请类型：</span>
            <strong>{{memberInfo.type == 'purchaser' ? '采购商' : '供应商'}}</strong>
          </li>
          <li>
            <span>订单状态：</span>
            <em>未支付</em>
          </li>
          <li>
            <span>已提交资料：</span>
            <em @click="onEditMemberInfo">点击修改</em>
          </li>
        </ul>
        <yd-button-group>
          <yd-button size="large" type="primary" @click.native="$router.push(`/member/pay?type=${memberInfo.type}&status=pay&id=${memberInfo.id}`)">去支付</yd-button>
        </yd-button-group>
      </div>

      <!-- 已支付状态 -->
      <yd-button-group v-else>
        <yd-button size="large" type="primary" @click.native="$router.push(`/member/pay?type=${memberInfo.type}&id=${memberInfo.id}`)">续费</yd-button>
      </yd-button-group>
    </div>
  </yd-layout>
</template>

<script>
  import { apiMemberInfo } from 'js/api'
  import { mapGetters } from 'vuex'
  import { session } from 'util/storage'

  export default {
    data() {
      return {
        status: '',
        memberInfo: {}
      }
    },
    created() {
      apiMemberInfo(this.token).then(data => {
        this.status = data.status
        this.memberInfo = data.roleApply
        this.memberInfo.type = data.type
      })
    },
    methods: {
      onEditMemberInfo() {
        session.set('memberInfo', this.memberInfo)
        this.$router.push('/member/manage')
      }
    },
    computed: {
      ...mapGetters(['token', 'avatar', 'userInfo'])
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  .m-member-ct {
    .user-box {
      @include flex(start);
      padding: .2rem .3rem;
      border-bottom: 1px solid #f4f4f4;
      .avatar-box {
        width: 1.2rem;
        height: 1.2rem;
        border: 1px solid #dedede;
        border-radius: 1.2rem;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .user-text {
        margin-left: .2rem;
        .name {
          font-size: .3rem;
          margin-bottom: .2rem;
        }
        .type {
          color: #999;
          em {
            color: #333;
          }
        }
      }
    }
    .info-box {
      padding: .3rem;
      border-bottom: 1px solid #f4f4f4;
      color: #999;
    }
    .add-box {
      @include flex();
      padding: .3rem;
      .addin {
        width: 48%;
        height: 3.2rem;
        text-align: center;
        border: 1px solid #f4f4f4;
      }
      .addin-text {
        height: 2.6rem;
        padding-top: 1rem;
        .ch {
          font-size: .4rem;
        }
        .en {
          color: #999;
        }
      }
      .addin-btn {
        height: .6rem;
        font-size: .28rem;
        line-height: .6rem;
        text-align: center;
        background: #f00385;
        color: #fff;
      }
    }
    .not-pay-status {
      ul {
        padding: .3rem;
        border-bottom: 1px solid #f4f4f4;
      }
      li {
        line-height: .6rem;
        color: #999;
        span {
          display: inline-block;
          width: 1.6rem;
          text-align: right;
        }
        strong {
          color: #333;
        }
        em {
          color: #f00385;
        }
      }
    }
  }
</style>